<template>
  <div class="article-item" @click="fn">
    <div class="header">
        <div class="left">
            <img :src="item.avatar" alt="">
        </div>
        <div class="title">
            <div class="title-header">{{item.stem}}</div>
            <div class="title-footer">{{item.creator}} | {{item.createdAt}}</div>
        </div>
    </div>
    <div class="content" ref="content"></div>
    <div class="footer">
        <span>点赞 {{item.likeCount}}</span>
        <span> | </span>
        <span>浏览 {{item.views}}</span>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        item:{
            type:Object,
            default(){
                return {}
            }
        }
    },
    mounted(){
        this.$nextTick(()=>{
            this.$refs.content.innerHTML = this.item.content
        })
    },
    methods:{
        fn(){
            this.$router.push({
                path:`/info/${this.item.id}`,
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .article-item{
        padding-bottom: 10px;
        margin: 10px 16px;
        // background-color: pink;
        border-bottom: 1px solid #ebedf0;
        .header{
            display: flex;
            align-items: center;
            text-align: left;
            .left img{
                width: 40px;
                height: 40px;
                margin-right: 10px;
            }
            .title .title-header{
                font-size: 14px;
            }
            .title .title-footer{
                color: #999;
                font-size: 10px;
            }
        }

        .content{
            margin-top: 10px;
            font-size: 14px;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 设置为6行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 20px; /* 行高 */
            max-height: 60px; /* 最大高度 = 行高 * 行数 */
            text-align: left;
        }

        .footer{
            font-size: 12px;
            color: #999;
            text-align: left;
            margin-top: 10px;
        }

    }
</style>